<template>
	<view class="content">
		<u-form :model="form" ref="uForm">
			<u-form-item label="汽车膜型号:" required label-width="180">
				<u-radio-group v-model="form.quTypeId" @change="getChange">
					<u-radio v-for="(item, index) in radioList" :key="index" :name="item.value" :disabled="disabled">
						{{ item.name }}
					</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item label="产品品牌:" required label-width="150" @click.native="showFun"><u-input
					@click.native="showFun" style="pointer-events: none;" :disabled="true" type="select"
					v-model="form.quCaBrandName" /></u-form-item>
			<u-form-item label="车主姓名:" required label-width="150"><u-input :disabled="disabled"
					v-model="form.quName" /></u-form-item>
			<u-form-item label="车主电话:" required label-width="150"><u-input :disabled="disabled"
					v-model="form.quPhone" maxlength="11" type="number" /></u-form-item>
			<u-form-item label="车架号:" label-width="150"><u-input :disabled="disabled"
					v-model="form.quVin" /></u-form-item>
			<u-form-item label="车型:" label-width="150" @click.native="cliclCar"><u-input :disabled="true"
					type="select" v-model="form.quModel" @click.native="cliclCar"
					style="pointer-events: none;" /></u-form-item>
			<u-form-item label="车牌号:" label-width="150"><u-input :disabled="disabled"
					v-model="form.quLicencePlate" /></u-form-item>
			<u-form-item label="施工店名:" required label-width="150" @click.native="storeNameFun"><u-input
					@click.native="storeName" style="pointer-events: none;" :disabled="true" type="select"
					v-model="form.quShopName" /></u-form-item>
			<u-form-item label="质保编号:" required label-width="150"><u-input :disabled="disabled"
					v-model="form.quQualityNum" /></u-form-item>
			<u-form-item label="施工时间:" required label-width="150" @click.native="showTime"><u-input type="select"
					@click.native="showTime" style="pointer-events: none;" :disabled="true" v-model="form.quBuildTime"
					placeholder="请选择施工时间" /></u-form-item>

			<u-form-item label="施工部位:" required label-width="150"><u-input :disabled="disabled"
					v-model="form.quBuildDept" /></u-form-item>
			<u-form-item label="贴车价格(CNY):" label-width="200"><u-input :disabled="disabled"
					v-model="form.quPasteMoney" type="number" /></u-form-item>
			<u-form-item label="质保年限:" label-width="150"><u-input :disabled="disabled"
					v-model="form.quAgeLimit" /></u-form-item>
			<u-form-item label="产品型号:" label-width="150"><u-input
					:disabled="disabled" v-model="form.prModel" /></u-form-item>
			<u-form-item label="膜筒序列号:" v-if="form.quTypeId != '102'" label-width="160"><u-input
					:disabled="disabled" v-model="form.quFilmNum" /></u-form-item>
			<!-- 区分  -->
			<!-- 101 -->
			<u-form-item label="颜色:" v-if="form.quTypeId == '101' " label-width="150"><u-input
					:disabled="disabled" v-model="form.quBuildColor" /></u-form-item>

			<!-- 102 -->
			<u-form-item label="前挡质保编号:" v-if="form.quTypeId == '102' " label-width="220"><u-input
					:disabled="disabled" v-model="form.quFrontNum" /></u-form-item>
			<u-form-item label="前挡膜筒序列号:" v-if="form.quTypeId == '102' " label-width="220"><u-input
					:disabled="disabled" v-model="form.quFrontFilm" /></u-form-item>
			<u-form-item label="侧后档质保编号:" v-if="form.quTypeId == '102' " label-width="220"><u-input
					:disabled="disabled" v-model="form.quSideNum" />
			</u-form-item>
			<u-form-item label="侧后档膜筒序列号:" v-if="form.quTypeId == '102' " label-width="250"><u-input
					:disabled="disabled" v-model="form.quSideFilm" /></u-form-item>


			<u-form-item label="图片:" :border-bottom="false" label-width="150"><u-input v-model="form.name"
					placeholder="" disabled /></u-form-item>
			<!-- 文件上传 -->
			<u-upload ref="upload" :action="action" :disabled="disabled" @on-success="success" @on-remove="remove"
				:file-list="fileList"></u-upload>

		</u-form>
		<u-select v-model="show" :list="ppList" @confirm="confirm"></u-select>
		<u-select v-model="storeName" :list="storeNameList" @confirm="confirmName"></u-select>
		<u-picker v-model="timePick" :title="'选择施工时间'" mode="time" :params="params" @confirm="setTime"
			:start-year="2024"></u-picker>
		<u-button type="primary" v-if="!disabled" @click="submit(form)">提交质保</u-button>
		<div style="color: red;">
			<u-checkbox style="display: inline-block;" v-model="checkboxValue" label="同意以下条款和条件"></u-checkbox>
			<div style="display: inline-block;">我同意以下<a href="#" style="display: inline-block;">[用户服务协议]</a>与<a href="#"
					style="display:inline-block;">[个人信息保护政策]</a></div>
		</div>
		<view>
			<div style="color: #fff;border:1px solid #fff;border-radius: 3px;margin-top: 0.2em;">
				<div style="text-align: center;">[用户服务协议]与[个人信息保护政策]</div>
				为有效保障您使用本服务的合法权益，您理解并同意接受以下规则:</br>
				1.您通过包括但不限于以下方式向服贸会数字平台发出的指令，均视为您本人的指令，不可撤回或撤销，您应自行对服贸会数字平台执行前述指令所产生的任何结果承担责任</br>
				2.通过您的服贸会数字平台账户和密码进行的所有操作:</br>
				通过与您的账号绑走的手机号码向服贸会数字平台发送的全部信息</br>
				3.通过与您的账号绑定的其他硬件、终端、软件、代号、编码、代码、其他账户名等有形体或无形体向服贸会数字平台发送的信息:</br>
				4.其他服贸会数字平台与您约走或服贸会数字平台认可的其他方式。</br>
			</div>
		</view>
		
		
		
		<image :src="src" mode="scaleToFill" class="images"></image>

		<u-popup v-model="showPopup" mode="center" height="800rpx" closeable width="690rpx" z-index="20"
			border-radius="20">
			<view class="car">
				<view class="title">
					选择品牌及车型
				</view>
				<view class="search">
					<u-search placeholder="搜索品牌" v-model="keyword" @change="getKey(keyword)"
						:showAction="false"></u-search>
				</view>
				<view class="car_d">
					<view class="c_left">
						<view :class="['car_item',{action:index == carIndex}]" v-for="(item,index) in carList"
							:key="index" @click="clickCar(item,index)">
							{{item.brBrand}}
						</view>
					</view>
					<view class="c_right">
						<view class="carIcon">
							<u-image width="160rpx" height="160rpx" :src="carSrc"></u-image>
						</view>
						<scroll-view scroll-y="true" class="c_h">
							<view class="c_h_c">
								<view :class="['c_h_i',{actionChild:index == carChildIndex}]"
									@click="clickChild(item,index)" v-for="(item,index) in carChildList" :key="index">
									{{item.brModel}}
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		url
	} from '@/common/index.js'
	import {
		addleague,
		getPPLX,
		getCaseCode,
		getBg,
		getCar,
		getCarList,
		getStore
	} from "@/common/api.js"
	export default {
		data() {
			return {
				checkboxValue:false,
				disabled: false,
				form: {
					quQualityNum: "", //质保编号
					quTypeId: "100", // 汽车膜型号
					quCaBrand: "", // 产品品牌
					quCaBrandName:"",// 产品品牌名称
					quName: "", // 车主姓名
					quPhone: "", //车主电话
					quVin: "", //车架号
					quModel: "", //车型
					quLicencePlate: "", //车牌号
					quShop: "", // 施工店名
					quShopName: "", // 施工店名
					quBuildTime: "", // 施工时间
					quBuildDept: "", // 施工部位
					quPasteMoney: "", // 贴车价格
					quAgeLimit: "", // 质保年限
					prModel: "", // 产品型号
					quFilmNum: "", //膜筒序列号
					quBuildColor: "", // 颜色
					quFrontNum: "", // 前挡质保编号
					quFrontFilm: "", //前挡膜筒序列号
					quSideNum: "", //侧后档质保编号
					quSideFilm: "", //侧后档膜筒序列号
					quPic: [], // 图片
				},
				radioList: [{
						name: '漆面膜',
						value: "100",
						disabled: false
					},
					{
						name: '改色膜',
						value: "101",
						disabled: false

					},
					{
						name: '太阳膜',
						value: "102",
						disabled: false
					}
				],
				action: url + "/common/upload",
				fileList: [],
				show: false,
				storeName: false,
				ppList: [],
				storeNameList: [],//施工店名--加盟商
				src: "",
				timePick: false,
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},

				// 车型
				keyword: "",
				showPopup: false,
				carList: [],
				carListOld: [], //筛选用
				carIndex: 0,
				// right
				carSrc: "",
				carChildList: [],
				carChildIndex: -1
			}
		},
		async onLoad() {
			let ppList = await getPPLX(0)
			this.ppList = ppList.rows.map(item => {
				return {
					label: item.brName,
					value: item.id
				}
			})
			this.getBg()
			let storeNameList = await getStore(0)
			this.storeNameList = storeNameList.rows.map(item => {
				return {
					label: item.leShop,
					value: item.id
				}
			})
		},
		methods: {
			async confirm(data) {
				this.form.quCaBrandName = data[0].label
				this.form.quCaBrand = data[0].value
				// let res = await getCaseCode({
				// 	quTypeId: this.form.quTypeId,
				// 	caBrand: data[0].value
				// })
				// this.form.pnId = res.data.pnId
				// this.form.coSome = res.data.coSome
				// this.form.quQualityNum = res.data.quQualityNum
				// this.$forceUpdate()
			},
			// 施工店名
			confirmName(data){
				// 写赋值
				this.form.quShopName = data[0].label
				this.form.quShop = data[0].value
			},
			// 变更型号清空数据
			getChange() {
				this.form.quQualityNum = ""
				this.form.quCaBrand = ""
				this.form.quCaBrandName = ""
			},
			// 清除
			getClean() {
				this.form = {
					quQualityNum: "", //质保编号
					quTypeId: "100", // 汽车膜型号
					quCaBrand: "", // 产品品牌
					quCaBrandName:"",//产品品牌名称
					quName: "", // 车主姓名
					quPhone: "", //车主电话
					quVin: "", //车架号
					quModel: "", //车型
					quLicencePlate: "", //车牌号
					quShop: "", // 施工店名
					quShopName: "", // 施工店名
					quBuildTime: "", // 施工时间
					quBuildDept: "", // 施工部位
					quPasteMoney: "", // 贴车价格
					quAgeLimit: "", // 质保年限
					prModel: "", // 产品型号
					quFilmNum: "", //膜筒序列号
					quBuildColor: "", // 颜色
					quFrontNum: "", // 前挡质保编号
					quFrontFilm: "", //前挡膜筒序列号
					quSideNum: "", //侧后档质保编号
					quSideFilm: "" //侧后档膜筒序列号
				}
				this.form.quPic = [] // 图片
				this.fileList = [] // fileList 文件列表
				this.$refs.upload.clear() // 清空数据
			},
			testFrom() {
				const {
					quTypeId,
					quCaBrand,
					quName,
					quPhone,
					quVin,
					quModel,
					quLicencePlate,
					quShop,
					quShopName,
					quBuildTime,
					quBuildDept,
					quPasteMoney,
					quAgeLimit,
					prModel,
					quFilmNum,
					quBuildColor,
					quFrontNum,
					quFrontFilm,
					quSideNum,
					quSideFilm
				} = {
					...this.form
				}
				if (quCaBrand == '') return this.$util.showTost("产品品牌不能为空")
				if (quName == '') return this.$util.showTost("车主姓名不能为空")
				if (quPhone == '') return this.$util.showTost("车主电话不能为空")
				if (quShop == '') return this.$util.showTost("施工店名不能为空")
				if (quBuildTime == '') return this.$util.showTost("施工时间不能为空")
				if (quBuildDept == '') return this.$util.showTost("施工部位不能为空")
				return true


			},
			async submit(form) {
				if (this.checkboxValue == false) {
					uni.showToast({
						title: '请同意用户协议！',
						icon:'error',
						duration: 2000
					}); 
					return;
				}
				if (this.testFrom(form)) {
					form.quPic = form.quPic.toString()
					let data = await addleague(form)
					if (data.code == 200) {
						this.$util.showTost("添加质保成功")
						setTimeout(() => {
							uni.reLaunch({ url:"/pagesHome/home/home" })
						}, 1000);
						this.getClean()
					}
				}
			},
			showFun() {
				this.show = true
			},
			storeNameFun() {
				this.storeName = true
			},
			// 显示时间组件
			showTime() {
				this.timePick = true
			},
			setTime(data) {
				// this.form.quBuildTime = `${data.year}-${data.month}-${data.day} ${data.hour}:${data.minute}:${data.second}`L
				this.form.quBuildTime = `${data.year}-${data.month}-${data.day}`
			},
			// 获取车品牌
			async clickCar(item, index) {
				this.carSrc = url + item.brPic
				this.carIndex = index
				this.carChildIndex = -1
				this.clickCarList(item.id, index)
			},
			// 获取车型
			async clickCarList(id, index) {
				let data = await getCarList(id)
				this.carChildList = data.rows
			},
			// 获取车型号
			clickChild(item, index) {
				this.selectItem = item
				this.carChildIndex = index
				this.form.quModel = item.brModel
				this.showPopup = false
			},
			// 点击车型
			async cliclCar() {
				let data = await getCar({
					pageNum: 1,
					pageSize: 400
				})
				this.carList = data.rows
				this.carListOld = data.rows
				this.clickCar(data.rows[0], 0)
				this.showPopup = true
			},
			// 实时获取输入框内容
			getKey(val) {
				let list = JSON.parse(JSON.stringify(this.carList))
				if (val != "") {
					let newData = []
					list.forEach(item => {
						if (item.brBrand && item.brBrand.indexOf(val) > -1) {
							newData.push(item)
						}
					})
					this.carList = newData
					this.clickCarList(newData[0].id, 0)
					this.carSrc = url + newData[0].brPic
				} else {
					this.carList = this.carListOld
					this.clickCarList(this.carListOld[0].id, 0)
					this.carSrc = url + this.carListOld[0].brPic
				}
			},
			// 获取背景
			async getBg() {
				let data = await getBg(129)
				this.src = url + data.rows[0].baUrl
			},
			// 上传图片
			success(res) {
				console.log(res.fileName);
				this.form.quPic.push(res.fileName)
			},
			// 删除图片
			remove(res) {
				this.form.quPic.splice(res, 1)
			}

		}
	}
</script>

<style lang="scss">
	.content {
		background-color: rgba(0, 0, 0, 0.2);
		padding: 30rpx;
	}

	.search {
		background-color: #fff;
		padding: 10rpx 20rpx;
		border-bottom: 1rpx solid #ccc;
	}

	/deep/.u-form-item {
		padding: 12rpx !important;
	}

	/deep/.u-form-item--left__content {
		color: #fff;
	}

	/deep/.u-btn--primary {
		background-color: #222;
		color: #fff;
		opacity: 0.8;
		border: 1rpx solid #f4f4f4;
		margin-top: 30rpx;
	}

	/deep/.uni-input-wrapper {
		color: #fff;
	}

	/deep/ .u-radio__label {
		color: #fff;
	}

	.images {
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: -1;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.2);
	}

	/* 车型 */
	.title {
		padding: 10rpx 20rpx;
		color: #222;
		height: 80rpx;
		display: flex;
		align-items: center;
		font-size: 30rpx;
		background-color: #D2D2D2;
	}

	.car {
		width: 100%;
		height: 100%;
		background-color: #222;
		overflow: hidden;

	}

	.car_d {
		display: flex;
		width: 100%;
		height: calc(100% - 70rpx);
		overflow-y: auto;
		overflow: hidden;

	}

	.c_left {
		width: 250rpx;
		height: 100%;
		background-color: #313136;
		overflow-y: auto;
		color: #fff;
	}

	.car_item {
		padding: 20rpx 20rpx;
		border: 1rpx solid #fff;
	}

	/* 激活状态 */
	.action {
		background-color: #fff;
		color: #222;
	}

	.actionChild {
		background-color: #D2D2D2;
	}

	/* c_right */
	.c_right {
		width: 440rpx;
		height: 100%;
		background-color: #fff;
		padding-bottom: 40rpx;
	}

	.c_h {
		height: calc(100% - 180rpx);
		overflow-y: auto;
		display: flex;
		flex-wrap: wrap;

	}

	.c_h_c {
		display: flex;
		flex-wrap: wrap;
	}

	.c_h_i {
		border: 1rpx solid #0E0D0D;
		padding: 10rpx 15rpx;
		margin-left: 10rpx;
		margin-top: 10rpx;
		height: 54rpx;
	}

	.carIcon {
		margin: 20rpx 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>